<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>物流结算</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/js/elementui/index.js"></script>
</head>
<body>

<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="运货单号">
            <el-input v-model="formInline.shippingNum" ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--数据表格-->
    <el-table
            :data="logisticJieSuan"
            style="width: 100%">
        <el-table-column label="序号" width="60" type="index">
        </el-table-column>
        <el-table-column label="货运单号" width="150">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.shippingNum }}</span>
            </template>
        </el-table-column>
        <el-table-column label="货物类别" width="110">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column label="出发地" width="185">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.startPlace }}</span>
            </template>
        </el-table-column>
        <el-table-column label="目的地" width="170">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.endPlace }}</span>
            </template>
        </el-table-column>
        <el-table-column label="运送距离(km)" width="100">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.distance }}</span>
            </template>
        </el-table-column>

        <el-table-column label="货物重量(T)" width="80">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productQuality }}</span>
            </template>
        </el-table-column>

        <el-table-column label="货物体积(m3)" width="80">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.pvalue }}</span>
            </template>
        </el-table-column>

        <el-table-column label="结算状态" width="80">
            <template slot-scope="scope">

                <span style="margin-left: 10px" v-if="scope.row.settlementStatus == 1">已结算</span>
                <span style="margin-left: 10px;color: #ff331f" v-else>未结算</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="170">
            <template slot-scope="scope">
                <el-button type="info" disabled v-if="scope.row.settlementStatus == 1">已结算</el-button>
                <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" v-else>结算</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="loadPage"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>

<!--     结算弹窗-->
    <el-dialog title="结算金额" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="物流公司:">
                <el-select v-model="form.logisticsId" placeholder="请选择物流公司">
                    <el-option
                            v-for="item in logistics"
                            :label="item.logisticsName"
                            :value="item.logisticsId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="运送方式:">
                <el-select v-model="form.driverId" placeholder="请选择运送方式">
                    <el-option
                            v-for="item in drivers"
                            :label="item.driverName"
                            :value="item.driverId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="货运单号：" :label-width="formLabelWidth">
                <el-input v-model="form.shippingNum" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="货物种类：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="订单编号：" :label-width="formLabelWidth">
                <el-input v-model="form.orderNum" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="数量：" :label-width="formLabelWidth">
                <el-input v-model="form.number" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="出发地：" :label-width="formLabelWidth">
                <el-input v-model="form.startPlace" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="目的地：" :label-width="formLabelWidth">
                <el-input v-model="form.endPlace" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="货物重量：" :label-width="formLabelWidth">
                <el-input v-model="form.productQuality" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="货物体积：" :label-width="formLabelWidth">
                <el-input v-model="form.pvalue" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="结算金额：" :label-width="formLabelWidth">
                <el-input v-model="form.settlementMoney" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveDialog">结算金额</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script>

    new Vue({
        el: "#app",
        data(){
            return{
                //---分页
                current:1,//当前页数
                total:0, //总条数
                pageSize:10 ,//每页条数
                logisticJieSuan:null,//数据信息
                formInline: {
                    shippingNum: '',
                },
                dialogFormVisible: false,
                form:{
                    logisticsName: "",
                    driverName: "",
                    shippingNum: "",
                    name: "",
                    orderNum: "",
                    number: "",
                    startPlace: "",
                    endPlace: "",
                    pvalue: "",
                    productQuality: "",
                    settlementMoney: "",
                    settlementStatus: "",
                },
                formLabelWidth: '120px',
                //物流下拉框
                logistics:{
                    logisticsId: "",
                    logisticsName: "",

                },
                // 驾驶员下拉框
                drivers:{
                    driverId: "",
                    driverName: "",
                }
            }
        },
        mounted(){
            this.loadPage(1);
        },
        methods:{
            onSubmit() {
                this.loadPage(1);
            },
            handleEdit(index, row) {
                this.form = row;
                this.optionShow();
                this.dialogFormVisible = true;
            },

            //跳转当前页
            loadPage(current) {
                this.current = current;
                this.shippingNum=this.formInline.shippingNum;
                //查询
                axios.get("/settlements?current="+current+"&shippingNum="+this.shippingNum).then(value => {
                    this.logisticJieSuan = value.data.data.records;
                    this.total = value.data.data.total;
                    this.pageSize=value.data.data.size;
                    this.current=value.data.data.current;
                })
            },
            // 清空弹窗内容
            clearDialog(){
                this.form={
                    logisticsName: "",
                    driverName: "",
                    shippingNum: "",
                    name: "",
                    orderNum: "",
                    number: "",
                    startPlace: "",
                    endPlace: "",
                    pvalue: "",
                    productQuality: "",
                    settlementMoney: "",
                    settlementStatus: "",

                }
            },

            //下拉框
            optionShow(){
                //为物流公司下拉框填充内容
                axios.get("/logisticsNames").then(value => {
                    this.logistics=value.data.data;
                })
                //为驾驶员下拉框填充内容
                axios.get("/driversNames").then(value => {
                    this.drivers=value.data.data;
                })
            },

            // //弹窗提交方法
            saveDialog() {

                //增加
                axios.post("/settlement", this.form
                ).then(value => {
                    console.log("success");
                    if (value.data.code == 1) {
                        this.loadPage(this.current);
                    }
                });

                this.clearDialog();
                this.dialogFormVisible = false;

            },
        }
    })


</script>

</html>